import PropTypes from 'prop-types'
import React, { memo, useRef, useEffect, useState } from 'react'

import * as echarts from 'echarts/core';
import {
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import { isArrayWithLength, calcZoomAndScale } from '@/utils'
import { LineChartWarpper } from './style'

echarts.use([
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);


const index = memo((props) => {
    const { data = [], params = {}, height = "120px" } = props

    const [zoom, setZoom] = useState()
    const [scale, setScale] = useState()
    const elRef = useRef()
    const [timer, setTimer] = useState()
    let startIndex = 0, endIndex = 7

    useEffect(() => {
        let myChart = echarts.init(elRef.current);
        const _data = data[0].data
        function run() {
            if (endIndex > _data.length - 1) {
                startIndex = 0
                endIndex = 7
            }
            else {
                startIndex = startIndex + 1
                endIndex = endIndex + 1
            }
            const _chartSeries = data.map(k => {
                return {
                    type: 'line',
                    stack: 'Total',
                    name: k.name,
                    data: k.data.slice(startIndex, endIndex).map(item => item.value),
                }
            });
            const xAxisData = _data.slice(startIndex, endIndex).map(item => item.date)
            myChart.setOption({ xAxis: { data: xAxisData, }, series: [..._chartSeries] });
        }

        function chartResize() {
            const { _zoom, _scale } = calcZoomAndScale()
            setScale(_scale)
            setZoom(_zoom)
        }
        function initChart() {
            if (!isArrayWithLength(data)) return
            const legendData = data.map(item => item.name)
            const xAxisData = data[0].data.slice(startIndex, endIndex).map(item => item.date)
            const _chartSeries = data.map(k => {
                return {
                    type: 'line',
                    stack: 'Total',
                    name: k.name,
                    data: k.data.slice(startIndex, endIndex).map(item => item.value),
                }
            });
            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData,
                    left: 16,
                    top: 16,
                    icon: "rect",
                    itemWidth: 14,
                    itemGap: 12,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                    axisLabel: {
                        fontSize: 16,
                        color: '#fff'
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 20,
                        color: '#fff'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            dashOffset: 16,
                            color: "#3F4B67"
                        }
                    }
                },
                series: [..._chartSeries]
            };
            option && myChart.setOption(option);
            chartResize()
        }
        initChart()
        window.addEventListener("resize", chartResize)

        if (data[0].data.length > 7) {
            const timer = setInterval(() => {
                run()
            }, 2000);
            setTimer(timer)
        }
        return () => {
            window.removeEventListener("resize", chartResize)
            timer && clearInterval(timer)
        }

    }, [])
    return (
        <LineChartWarpper height={height}>
            <div ref={elRef} className='chart-line-container' style={{ zoom: zoom, transform: "scale(" + scale + ")", transformOrigin: '0 0' }}> </div>
        </LineChartWarpper>
    )
})

index.propTypes = {
    height: PropTypes.string,
    params: PropTypes.object,
    data: PropTypes.array,
}

export default index